import { useState } from 'react'
import { Root, createRoot } from 'react-dom/client'
// import React from 'react';
import { ReactFlow } from '@xyflow/react';
 
import '@xyflow/react/dist/style.css';
 
const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Dooring' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: 'Flow' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
 
function Comp(props: any) {
  console.log('接收到的props', props)
  const [count, setCount] = useState(0)
  return (
    <>
      <span>props.obj.a: {props.obj.a}</span>
      <span>这是一个react流程设计库</span>
      <div className='sdfsdfsd' style={{border: '1px solid lightblue', width: '100%', height: '300px', overflow: "hidden"}}>
        <ReactFlow nodes={initialNodes} edges={initialEdges} fitView />
      </div>
      <div className='sdfsdfsd' style={{border: '1px solid blue'}}>
        <span>这是一个react组件, 数据是: {count}</span>
        <button onClick={()=>setCount(count+1)}>点击+1</button>
      </div>
    </>
    
  )
}

export default Comp;